State Hook

State 是 React 一種特別的變數，當 State 發生改變時，所有關連到這個 State 的 DOM 元素，會依據此變數改變後的結果，來做DOM的重新渲染。

之前提到 FC 不會有自己保存的狀態變數，但又希望能有 State 的功能，用以控制元件的呈現結果。

useState 就是能在 FC 中使用 State 的 React Hook。

範例

import React, { useState } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

語法說明

1. 在 React 函式庫中，取得 useState 這個 Hook Function

import {useState} from 'react';

2. 在 Function Componet 中使用 useState 取得 State

   useState 是一個函式，它接收一個參數，這個參數是 State 的初始值

   useState 的函式回傳值是一個 Array

   Array 第一個值是 State 變數，第二個值是 改變 State 的函式

   ? 為什麼不直接修改 State 變數 而是使用 setState 函式做 State 的改變呢？
   因為 React 會在執行 setState 的過程中，去檢查關連到這個 State 的地方，一併做改變

const [count, setCount] = useState(0);

3. 配置關連到 State 的 DOM 元素，用以呈現結果，如果要更新 State，就使用 setState 的方式去更新。

   React 會檢查畫面 DOM 元素中，所有關連該 State 的地方做變更。

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );

使用多個 State 變數

把 State 變數宣告成一對 [something, setSomething] 在程式表達上也很清楚，

因為如果想要使用超過一個 State 變數，這能讓我們對不同的 State 變數有不同的命名

function ExampleWithManyStates() {
  // 宣告多個 state 變數！
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  ...
}

將相關的 State 放在一起成為 Object 做管理

如果相關的 State 總是同時出現一起變化，那麼合併成一個物件易放集中管理

function Box() {
  const [state, setState] = useState({ left: 0, top: 0, width: 100, height: 100 });
  // ...
}

依據程式的邏輯，做出最適合的 State 拆分，未來在做重構時就能更輕鬆的抽換

eg. 把 left/top 做為 position，把 width/height 做為 size

function Box() {
  const [position, setPosition] = useState({ left: 0, top: 0 });
  const [size, setSize] = useState({ width: 100, height: 100 });
  // ...
}

使用時機

希望變數改變時，React 能做出對應畫面 Render 更新，就必須使用 useState 創建 State 變數

Next

當希望 State 是在特定的時間點且不是事件觸發時做更新，這時候就會使用到 useEffect 這個 React Hook。

Reference

https://pjchender.dev/react/react-doc-hooks-into/

https://zh-hant.reactjs.org/docs/hooks-state.html

https://zh-hant.reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables